<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="HTML, CSS, JavaScript, jQuery, bootstrap5">
    <meta name="author" content="creativemela">
    <meta name="description" content="Discover Tawam, a versatile personal portfolio HTML template by Creativemela. Ideal for showcasing your work, Tawam offers sleek design, multiple layouts, and comprehensive UI/UX services. Perfect for designers, developers, and creatives.">
    {% load static %}
    <!-- Title -->
    <title>B站UP主数据收集分析系统</title>

    <!-- Favicon -->


    <!-- CSS File -->
    <link rel="stylesheet" href="{%static 'css/animate.min.css' %}">
    <link rel="stylesheet" href="{%static 'css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/bootstrap-icons.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/fontawesome.all.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/backToTop.css' %}">
    <link rel="stylesheet" href="{% static 'css/owl.carousel.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/odometer-theme-default.css' %}">
    <link rel="stylesheet" href="{% static 'css/magnific-popup.css' %}">

    <link rel="stylesheet" href="{% static 'css/style.css' %}">
    <link rel="stylesheet" href="{% static 'css/responsive.css' %}">
    
</head>

<body>
    <!-- start: Preloader -->
    <div id="preloader">
        <div id="container" class="container-preloader">
            <div class="animation-preloader">
                <div class="spinner"></div>
                <div class="txt-loading">
                    <span data-preloader-txt="b" class="characters">b</span>

                    <span data-preloader-txt="i" class="characters">i</span>

                    <span data-preloader-txt="L" class="characters">l</span>

                    <span data-preloader-txt="i" class="characters">i</span>

                    <span data-preloader-txt="b" class="characters">b</span>

                    <span data-preloader-txt="i" class="characters">i</span>

                    <span data-preloader-txt="L" class="characters">l</span>

                    <span data-preloader-txt="i" class="characters">i</span>

                </div>
            </div>
            <div class="loader-section section-left"></div>
            <div class="loader-section section-right"></div>
        </div>
    </div>
    <!-- end: Preloader -->
    <!-- staart: 标题 -->
    <div class="container section-title-wrapper text-center">
        <h2 class="wow fadeInUp" data-wow-delay=".4s">B站UP主数据收集分析系统</h2>
    </div>
    <!-- end: 标题 -->
                    
    <!-- Main Area Start -->
    <main id="home">

        <!-- START: PROJECT SECTION -->
        <section id="works" class="project-section section-p">
            <div class="container section-title-wrapper text-center">

                <!-- <ul class="d-flex flex-wrap justify-content-center mt-4 gap-2 wow fadeInUp" data-wow-delay=".5s">
                </ul> -->
            </div>
            <div class="projects-container-wrapper">
                <div class="col-sm-12 container lg-container">
                    <div class="projects-container row">
                        <div class="grid-item col-lg-4 col-md-6 text-center ux-ui design">
                            <div class="item-wrapper">
                                <div class="project-item wow fadeInUp" data-wow-delay=".6s">
                                    <img src="{% static data.0.image %}" alt="project">
                                    <div class="project-title-wrapper d-flex align-items-center">
                                        <div class="text-start">
                                            <h5  class="up-page" id={{data.0.id}}>{{data.0.name}}</h5>
                                            <p class="sub-title">粉丝数:{{data.0.fans}}</p>
                                        </div>
                                        <div class="ms-auto">
                                            <span class="icon icon-arrow up-page" id={{data.0.id}}></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="grid-item col-lg-4 col-md-6 text-center branding">
                            <div class="item-wrapper">
                                <div class="project-item wow fadeInUp" data-wow-delay=".7s">
                                    <img  src="{% static data.1.image %}" alt="project">
                                    <div class="project-title-wrapper d-flex align-items-center">
                                        <div class="text-start">
                                            <h5  class = "up-page" id={{data.1.id}}>{{data.1.name}}</h5>
                                            <p class="sub-title">粉丝数:{{data.1.fans}}</p>
                                        </div>
                                        <div class="ms-auto">
                                            <span class="icon icon-arrow  up-page" id="{{data.1.id}}"></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="grid-item col-lg-4 col-md-6 text-center branding">
                            <div class="project-item wow fadeInUp" data-wow-delay=".8s">
                                <img   src="{% static data.2.image %}" alt="project">
                                <div class="project-title-wrapper d-flex align-items-center">
                                    <div class="text-start">
                                        <h5  class="up-page" id={{data.2.id}}>{{data.2.name}}</h5>
                                        <p class="sub-title">粉丝数:{{data.2.fans}}</p>
                                    </div>
                                    <div class="ms-auto">
                                        <span class="icon icon-arrow  up-page" id="{{data.2.id}}"></span>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="view-all-ptflo-btn-wrapper text-center">
                <button class="btn all-up-btn">View All Ups</button>
            </div>
        </section>
        <!-- END: PROJECT SECTION -->



        <!-- START: CONTACT SECTION -->
        <section id="contact" class="contact-section section-m">
            <div class="section-wrapper">
                <div class="container">
                    <div class="lets-talk d-none d-xl-flex">
                        <h2>Add Up</h2>
                        <div class="mx-auto">
                            <img src="{% static 'image/arrow.png' %}" alt="arrow">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-6" style="width: 100%;">
                            <form id="contact-form" action="/up_submit/" method="POST" class="wow fadeInLeft" data-wow-delay=".3s">
                                {% csrf_token %}
                                <div class="user-details row">
                                    <div class="input-box col-md-6">
                                        <label class="details" for="UP-name">UP Name</label>
                                        <input type="text" id="UP_name" class="text" name="UP_name" placeholder="" autocomplete="off" required="">
                                    </div>
                                    <div class="input-box col-md-6">
                                        <label class="details" for="url">Up Url</label>
                                        <input type="text" id="url" class="text" name="url" placeholder="" autocomplete="off" required="">
                                    </div>
                                <button type="submit" class="btn  btn-primary" style="width:10%;height: auto; ">
                                    submit</button>
                                <p  class="btn  btn-primary modal-popup" data-mfp-src="#popup" style="float: right;width: 10%;">help</p>
                            </form>
                            
                            <p id="form-message"></p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- END: CONTACT SECTION -->

    </main>
    <!-- Main Area End -->

    <footer>
    </footer>



    <!-- start: Popup -->
    <div id="popup" class="popup_content_area zoom-anim-dialog mfp-hide project-popup">
        <div class="popup_modal_content">
            <div class="project-info-wrapper">
                <img src="{% static 'picture/help.png' %}" class="popup-close">
            </div>
        </div>
    </div>
    <!-- end: Popup -->


    <!-- **** All JS Files ***** -->
    <script src="{% static 'js/jquery.min.js' %}"></script>
    <script src="{% static 'js/bootstrap.min.js' %}"></script>
    <script src="{% static 'js/backToTop.js' %}"></script>
    <script src="{% static 'js/smooth-scroll.js' %}"></script>
    <script src="{% static 'js/appear.min.js' %}"></script>
    <script src="{% static 'js/wow.min.js' %}"></script>
    <script src="{% static 'js/one-page-nav.js' %}"></script>
    <script src="{% static 'js/owl.carousel.min.js' %}"></script>
    <script src="{% static 'js/isotope.pkgd.min.js' %}"></script>
    <script src="{% static 'js/odometer.min.js' %}"></script>
    <script src="{% static 'js/magnific-popup.js' %}"></script>
    <script src="{% static 'js/validate.min.js' %}"></script>

    <!-- Custom JS -->
    <script src="{% static 'js/main.js' %}"></script>
    <script src="{% static 'js/active.js' %}"></script>
    <script src="{% static 'js/contact-form.js' %}></script>
</body>

</html>